<template>
  <div class="page-main">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>报工日志</span></div>
    <div class="container">
      <div class="header"></div>
      <div class="content-list">
        <a-table
          class="hte-table-content"
          :columns="columns"
          :data-source="records"
          :pagination="pagination"
          :loading="tabLoading"
          rowKey="id"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          size="middle"
          @change="pageChange"
        >
          <span slot="opratorDescRender" slot-scope="text, record" v-if="record.opratorDesc">
            <div v-for="(item, index) in record.opratorDesc.split('<br/>')" :key="index">
              {{ item }}
            </div>
          </span>
          <span slot="opratorTimeRender" slot-scope="text, record">
            {{ formatDate(record.opratorTime, 'yyyy-MM-dd HH:mm:ss') }}
          </span>
        </a-table>
      </div>
    </div>
    <a-back-top class="backtodom" />
  </div>
</template>
<script>
import { postAction } from '@/api/manage'
import { formatDate } from '@/utils/util'
export default {
  name: 'ContractTaskList',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractTaskList',
      },
      taskId: this.$route.params && this.$route.params.taskId,
      columns: [
        {
          title: '操作类型',
          dataIndex: 'opratorName',
          width: '12%',
          align: 'center',
        },
        {
          title: '操作详情',
          dataIndex: 'opratorDesc',
          width: '54%',
          align: 'center',
          scopedSlots: { customRender: 'opratorDescRender' },
        },
        {
          title: '操作时间',
          dataIndex: 'opratorTime',
          width: '12%',
          align: 'center',
          scopedSlots: { customRender: 'opratorTimeRender' },
        },
        {
          title: '操作人',
          dataIndex: 'oprator',
          width: '22%',
          align: 'center',
        },
      ],
      records: [],
      selectedRowKeys: [],
      selectedRow: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize:10
      },
      tabLoading: false,
      currPageIndex: 1,
      currPageSize: 10,
      valueSearch: '',
    }
  },
  mounted() {
    this.getTaskList()
  },
  methods: {
    formatDate,
    /**
     * 查询
     */
    getTaskList() {
      this.tabLoading = true
      postAction('/workReport/log/page', {
        pageSize: this.pagination.pageSize,
        pageNo:this.pagination.current,
        keyword: this.searchVal,
        busType: 'WORK_TASK',
        busKey: this.taskId,
      }).then((res) => {
        if (res.code == 200 && res.result) {
          this.pagination.total = res.result.total
          res.result.records.forEach((item, index) => {
            item.key = this.taskFlag + index
          })
          this.records = res.result.records
          this.tabLoading = false
        } else {
          this.$messageWorkReport.warning('数据加载失败:' + res.message)
          this.tabLoading = false
        }
      })
    },
    pageChange(page) {
      this.$set(this.pagination,"current",parseInt(page.current));
      this.getTaskList()
    },
    onSelectChange(selectedRowKeys, selectedRow) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRow = selectedRow
    },
    doSearch() {
      this.currPageIndex = 0
      this.getTaskList()
    },
    handleChange(value) {
      console.log(`selected ${value}`)
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {
    background-image: url(~@assets/contract-top.png);
  }
  .container {    
    .content-list {
      margin-top: 15px;
      background-color: #fff;
    }
  }
}
</style>